<template>
	<view class="integral">
		<view class="info">
			<view class="ititle">总积分（1积分等于1元，下单手动输入积分可抵扣）</view>
			<view class="score">{{info.integral}}</view>
			<view class="detail space-between">
				<view class="left">今日奖励 {{info.today_integral}} 积分</view>
				<view class="right">累积 {{info.sum_integral}} 积分</view>
			</view>
		</view>
		<view class="list">
			<view class="item title">
				<view class="item1">时间</view>
				<view class="item2">来源</view>
				<view class="item3">积分</view>
			</view>
			<block v-if="historyList.length">
			<view class="item" v-for="(item, index) in historyList" :key="index">
				<view class="item1">{{ item.add_time }}</view>
				<view class="item2">{{ item.mark }}</view>
				<view class="item3" :style="{ color: item.pm==1 > 0 ? '#FF7904' : '' }">{{ item.number }}</view>
			</view>
			</block>
			<view v-else class="empty" >
				暂无数据...
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyList: [{
						time: "2022-03-24",
						name: "平台收益",
						num: "+50"
					},
					{
						time: "2022-03-24",
						name: "下单消耗",
						num: "-50"
					},
					{
						time: "2022-03-24",
						name: "平台收益",
						num: "+50"
					},
					{
						time: "2022-03-24",
						name: "下单消耗",
						num: "-50"
					},
				],
				page: 1,
				limit: 10,
				info: {
					brokerage: 0,
					extractPrice: 0,
					extractTotalPrice: 0,
					integral: "0.00",
					now_money: "0.00",
					orderStatusSum: 0.01,
					recharge: 0,
					sum_integral: 0,
					today_integral: 0,
				}
			};
		},
		onShow() {
			this.getHistoryList();
			this.$api.post({
				url: "/ebapi/user_api/balance_info",
				success: (res) => {
					this.info = res;
				},
			})
		},
		methods: {
			getHistoryList() {
				this.$api.post({
					url: "/ebapi/user_api/user_integral_list",
					data: {
						page: this.page,
						limit: this.limit
					},
					success: (res) => {
						this.historyList = res;
						console.log(res, "res")
					},
				})
			}
		}
	};
</script>

<style lang="scss">
	.integral {
		padding: 40rpx 0;

		.info {
			color: #fff;
			padding: 27rpx 30rpx;
			background-image: url("https://jyapi.rapidship.cn/public/temporary/score.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			height: 262rpx;
			width: 702rpx;

			.score {
				font-size: 60rpx;
				margin: 32rpx 0 38rpx;
			}
		}

		.list {
			.title {
				font-size: 32rpx;
				margin: 65rpx 0;
			}

			.item {
				display: flex;
				text-align: center;
				margin-bottom: 65rpx;

				.item1,
				.item2 {
					flex: 2;
				}

				.item3 {
					flex: 1;
				}
			}
		}
	}
</style>